<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css"
          media="screen"/>
    <link rel="StyleSheet" href="../css/searchProduct.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/mouseEventInform.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/IncludeTop">
</div>
<div id="Content">

    <div id="Catalog">
        <form action="newAccount" method="post" name="registerForm">
            <h3>User Information</h3>
            <table>
                <tr>
                    <td>User ID:</td>
                    <td><input type="text" name="username" id="username" onblur="usernameIsExist()"/>
                        <div id="usernameMsg"></div>
                    </td>
                </tr>
                <tr><td></td><td id="usernameTips"></td></tr>
                <tr>
                    <td>New password:</td>
                    <td><input type="password" id="newPassword" name="password" /></td>
                </tr>
                <tr>
                    <td>Repeat password:</td>
                    <td><input type="password" id="repeatedPassword" name="repeatedPassword"/></td>
                </tr>
                <tr><td></td><td id="passwordTips"></td></tr>
                <tr>
                    <td>VerificationCode:</td>
                    <td>
                        <input type="text" name="vCode" size="5" maxlength="6" >
                        <a href="/account/registerForm"><img id="code"  border="0" src="/account/verificationCode" name="code"></a>
                    </td>
                </tr>

            </table>
            <tr> <font color="red" th:text="${messageAccount}">message</font></tr>

            <div th:replace="account/includeAccountFields::#middle"></div>

            <input type="submit" name="newAccount" value="Save Account Information" />
        </form>
    </div>
</div>

<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>

<script type="text/javascript" src="../js/checkUsernameAndPassword.js"></script>

<div th:replace="common/IncludeBottom">
</div>
</body>
</html>